<template>
  <el-form ref="ruleForm" :model="ruleForm" disabled label-width="100px" class="demo-ruleForm">
    <el-form-item label="知识名称">
      <span v-html="ruleForm.name" />
    </el-form-item>
    <el-form-item label="关联能力">
      <el-cascader
        v-model="ruleForm.abilityInfoIds"
        :show-all-levels="false"
        :options="skills"
        :props="props"
        clearable
      />
    </el-form-item>
    <el-form-item label="是否反转">
      <el-tag>{{ ruleForm.flip==1?'是':'否' }}</el-tag>
    </el-form-item>
    <el-form-item label="视频地址" prop="url">
      <el-link v-if="ruleForm.url!==''" :href="ruleForm.url" target="_blank">转到视频</el-link>
      <el-link v-else>无连接</el-link>
    </el-form-item>
    <el-form-item label-width="30px">
      <el-divider />
      <div v-html="ruleForm.description" />
    </el-form-item>
  </el-form>
</template>

<script>
import { stringToIntArray } from '@/utils/myutil'
export default {
  name: 'KnowledgDetail',
  data() {
    return {
      props: { multiple: true, label: 'name', value: 'id' },
      ruleForm: {
        id: '',
        name: '',
        description: '',
        abilityInfoIds: '',
        flip: 0,
        url: ''
      },
      id: undefined,
      skills: null
    }
  },
  created() {
    this.id = this.$store.getters.params.id
    this.getSkills()
    if (this.id !== undefined) {
      this.get('/knowledge/getone', result => {
        this.ruleForm = result.data
        if (result.data.abilityInfoIds !== '') {
          const a = []
          const b = this.ruleForm.abilityInfoIds.split(',')
          for (let i = 0; i < b.length; i++) {
            a.push(stringToIntArray(b[i], '|'))
          }
          this.ruleForm.abilityInfoIds = a
        }
      }, { id: this.id })
    } else {
      this.reset()
    }
  },
  updated() {
    Prism.highlightAll()
  },
  methods: {
    async getAbilityInfo(ids) {
      const res = await this.axios.get('/ability-info/listByIds', { params: { ids: ids }})
      this.options = res.data.data
    },
    getSkills() {
      this.get('skill/list', result => {
        this.skills = result.data
      }, { id: 0, isDel: 1 })
    }
  }
}
</script>

<style scoped>
  .demo-ruleForm{
    padding-right:20px;
  }
</style>
